<template>
  <div>
    <el-dialog
      title="主题设置"
      :visible.sync="showModal"
      width="30%"
      :before-close="handleClose"
      append-to-body
    >
        <div class="theme-options">
          <el-radio-group v-model="currentTheme">
            <el-radio :label="themes.light">浅色主题</el-radio>
            <el-radio :label="themes.dark">深色主题</el-radio>
          </el-radio-group>
        </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showModal = false">取消</el-button>
          <el-button type="primary" @click="saveTheme">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
      currentTheme: 'light',
      themes: {
        light: 'light',
        dark: 'dark'
      }
    }
  },

  methods: {
    initTheme() {
      this.showModal=true
      const savedTheme = localStorage.getItem('app-theme')
      this.currentTheme = savedTheme || this.themes.light
      this.applyTheme()

    },
    applyTheme() {
      document.documentElement.className = this.currentTheme
    },
    saveTheme() {
      localStorage.setItem('app-theme', this.currentTheme)
      this.applyTheme()
      this.showModal = false
      this.$emit('themeChanged', this.currentTheme)
    },
    handleClose(done) {
      done()
    }
  }
}
</script>

<style>
  .theme-options {
    padding: 20px;
  }
</style>
